<template>
  <el-tabs v-model="activeName">
    <el-tab-pane v-for="pane in panes" :key="pane.name" v-bind="commonFilterAttr(pane, ['body'])">
      <LowCode v-if="pane.body" :schema="pane.body" />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import LowCode from '@/components/LowCode.vue'
import { commonFilterAttr } from '../../common/util'
import { isDef } from '@/utils/index'
import { handleApi } from '../../common/api'

defineOptions({ name: 'TabsCom' })

const instance = getCurrentInstance()
const props = defineProps({
  schema: {
    type: Object,
    required: true
  }
})

const schema = props.schema
const schemaPanes = schema.panes || []
const activeName = ref()
const panes = ref(schemaPanes)

if (isDef(schema.activeName)) {
  activeName.value = schema.activeName
} else {
  if (schemaPanes.length) {
    activeName.value = schemaPanes[0].name
  }
}
onMounted(() => {
  const api = schema.api
  if (!api) {
    return
  }
  handleApi(api, instance).then((rows) => {
    panes.value = rows
    if (!isDef(schema.activeName)) {
      if (rows.length) {
        activeName.value = rows[0].name
      }
    }
  })
})
</script>
